<template>
    <Form ref="form" :model="data" :rules="rules" :label-width="labelWidth" :label-position="labelPosition">
        <Row :gutter="24" type="flex">
            <Col v-bind="grid">
                <DatePicker type="daterange" v-width="'100%'" v-model="data.date" placeholder="日期选择" element-id="date" />
            </Col>
            <Col v-bind="grid">
                <Input v-model="data.name" placeholder="请输入患者姓名/手机号/诊疗号" element-id="name" />
            </Col>
            <Col v-bind="grid">
                <FormItem label="归属人" prop="personnel" label-for="personnel">
                    <Select v-model="data.personnel" placeholder="归属人" element-id="personnel">
                        <Option :value="0">高玲</Option>
                        <Option :value="1">王艳</Option>
                        <Option :value="2">刘志强</Option>
                    </Select>
                </FormItem>
            </Col>
            <Col v-bind="grid">
                <FormItem label="就诊类型" prop="disease" label-for="disease">
                    <Select v-model="data.diagnosis" placeholder="就诊类型" element-id="diagnosis">
                        <Option :value="0">初诊</Option>
                        <Option :value="1">复诊</Option>
                        <Option :value="2">未及时复诊</Option>
                        <Option :value="3">抗复发</Option>
                        <Option :value="4">流失</Option>
                        <Option :value="5">断诊</Option>
                    </Select>
                </FormItem>
            </Col>
            <Col span="8">
                <FormItem label="标签">
                    <Select v-model="model12" filterable multiple>
                        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </FormItem>
            </Col>
        </Row>
    </Form>
</template>
<script>
    import { mapState } from 'vuex';

    export default {
        data () {
            return {
                cityList: [
                    {
                        value: '在乎费用',
                        label: '在乎费用'
                    },
                    {
                        value: '专家',
                        label: '专家'
                    },
                    {
                        value: '敏感',
                        label: '敏感'
                    },
                    {
                        value: '远程',
                        label: '远程'
                    }
                ],
                model12: [],
                grid: {
                    xl: 4,
                    lg: 8,
                    md: 12,
                    sm: 24,
                    xs: 24
                },
                collapse: false,
                data: {
                    name: '',
                    date: '',
                    consultant: '',
                    personnel: '',
                    diagnosis: ''
                },
                rules: {

                }
            }
        },
        computed: {
            ...mapState('admin/layout', [
                'isMobile'
            ]),
            labelWidth () {
                return this.isMobile ? undefined : 80;
            },
            labelPosition () {
                return this.isMobile ? 'top' : 'right';
            }
        }
    }
</script>
